<template>
  <div class="comp-tsrq">
    <el-table
      class="table"
      :data="tableData"
      row-key="id"
      height="390px"
      style="width: 100%"
    >
      <el-table-column prop="name" label="姓名" width="140" align="center"></el-table-column>
      <el-table-column prop="idCard" label="居住证号" width="200"></el-table-column>
      <el-table-column prop="linkPhone" label="个人联系电话" width="140"></el-table-column>
      <el-table-column prop="residenceAddress" label="户籍地址">
        <template slot-scope="{row}">
          <el-tooltip effect="dark" :content="row.residenceAddress" placement="top">
            <span class="line-clamp-1">{{ row.residenceAddress }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="censusRegisterAddress" label="暂住地址">
        <template slot-scope="{row}">
          <el-tooltip effect="dark" :content="row.censusRegisterAddress" placement="top">
            <span class="line-clamp-1">{{ row.censusRegisterAddress }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="masterName" label="户主姓名" width="140"></el-table-column>
      <el-table-column prop="masterLinkPhone" label="户主电话" width="140"></el-table-column>
      <el-table-column prop="personTypeName" label="人员类型" width="140"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "CompTsrq",
  props: {
    info: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableData: []
    }
  },
  watch: {
    info: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) {
          this.tableData = val
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.comp-tsrq {
  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td{
    background-color: transparent!important;
  }
}
</style>
